<template>
	<view>
		<view class="">
			<view class="m-h1" style="text-align: center;">
				选择定制类型
			</view>
			<view class="" @tap="toBack()">
				<image class="nav-margin-back-img" src="../../static/back.png" mode="widthFix"></image>
			</view>
		</view>	
		<view class="nav-margin-top" style="display: flex;">
			<view class="nav-list">
				<view class="nav-list-bottom-active-t"  style="margin-top: 20rpx;">
					类型
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active-t">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom-active-t"  style="margin-top: 20rpx;">
					规格
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active-t">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom-active"  style="margin-top: 20rpx;">
					配送
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					结算
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="" style="margin-top: 20rpx;margin-bottom: 36rpx;">
			<image style="width: 750rpx;height: 560rpx;" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bancai-1.png" mode="widthFix"></image>
		</view>
		
		<view class="content">
			<view class="content-h2">
				定金比例
			</view>
			<view class="content-p-mini">
				我们支持最低20%的预付定金，提货时支付尾款
			</view>
		</view>
		
		<view class="" style="display: flex;justify-content: center;margin-top: 36rpx;">
			<text @click="open()" class="c-rang">{{value}}</text><text class="c-rang-1" style="position: relative;top: 12rpx;left: 6rpx;">%</text>
			
		</view>
		<view>
		   <slider max="100" min="20" :value="value" @change="sliderChange" step="5" />
		 </view>
		 
		 <view class="content" style="margin-top: 36rpx;">
		 	<view class="content-h2">
		 		提货方式
		 	</view>
		 	<view class="content-p-mini">
		 		请根据您的需求选择适合的提货方式
		 	</view>
			
			<view class="content-flex" style="margin-top: 64rpx;">
				<view @tap="isActive1=1" :class="[isActive1==1?'content-list-box-active':'content-list-box']">
						<text :class="[isActive1==1?'content-h3-active':'content-h3']">工厂自提</text>
				</view>
				
				<view @tap="isActive1=2" :class="[isActive1==2?'content-list-box-active':'content-list-box']">
						<text :class="[isActive1==2?'content-h3-active':'content-h3']">物流运输</text>
				</view>
				
				
			</view>
			
			<!-- 地区选择 -->
			 <view v-if="isActive1==2" >
			     <view class="uni-list">
			         <view class="uni-list-cell">
			                
			                 <view class="uni-list-cell-db" style="width: 654rpx;height: 92rpx;border: 2rpx solid #96A1B9;margin-bottom: 36rpx;">
			                     <picker @change="bindPickerChangeInfoA" :value="InfoIndexA" :range="infoA">
									 <view v-if="InfoIndexA==0" class="uni-input f-input-font" >选择项目</view>
									 
			                         <view v-else class="uni-input f-input-font" >{{infoA[InfoIndexA]}}</view>
			 						<image class="f-input-next" src="../../static/next.png" mode=""></image>
			                     </picker>
			                 </view>
			         </view>
			     </view>
			 </view>
			
				
				<!-- 收货信息 -->
				<view v-if="isActive1==2" >
				    <view class="uni-list">
				        <view class="uni-list-cell">
				               
				                <view class="uni-list-cell-db" style="width: 654rpx;height: 92rpx;border: 2rpx solid #96A1B9;margin-bottom: 36rpx;">
				                    <picker @change="bindPickerChangeInfo" :value="InfoIndex" :range="info">
				                       <view v-if="InfoIndex==0" class="uni-input f-input-font" >请选择收货信息</view>
				                       <view v-else class="uni-input f-input-font" >{{info[InfoIndex]}}</view>
										<image class="f-input-next" src="../../static/next.png" mode=""></image>
				                    </picker>
				                </view>
				        </view>
				    </view>
				</view>
		
		 </view>
		 
		 <view class="content" style="margin-top: 36rpx;">
				<view class="content-h2">
								托盘
				</view>
				<view class="content-p-mini">
								请根据您的需求选择合适的方案
				</view>
				
				<view class="content-flex" style="margin-top: 64rpx;">
					<view @tap="isActive2=1" :class="[isActive2==1?'content-list-box-active':'content-list-box']">
							<text :class="[isActive2==1?'content-h3-active':'content-h3']">自带托盘</text>
					</view>
					
					<view @tap="isActive2=2" :class="[isActive2==2?'content-list-box-active':'content-list-box']">
							<text :class="[isActive2==2?'content-h3-active':'content-h3']">厂家配备</text>
					</view>
					
				</view>
				
				
				<view class="content-h2">
								喷绘定制
				</view>
				<view class="content-p-mini" style="margin-bottom: 32rpx;">
								请定义您产品的喷绘内容
				</view>
				
				
				<view v-for="(item,i) in arrayList" class="" style="margin-bottom: 60px;margin-bottom: 32rpx;">
					<view @click="isArray=i" class="box-1" :class="[i==isArray?'box-1-active':'']"   style="">
						<view class="" style="display: flex;margin-top: 20rpx;">
							<view class="" style="margin-top: 8rpx;" >
								<view class="" style="margin-right: 20rpx;display: flex;">
									<view class="box-font-1" :class="i==isArray?'box-1-font-active':''" style="margin-right: 10rpx;">规格：</view>
									<view class="box-font-2" :class="i==isArray?'box-1-font-active':''" >{{item.sku}}mm</view>
								</view>
								<view class="" style="margin-right: 20rpx;">
									<text class="box-font-1" :class="i==isArray?'box-1-font-active':''"  style="margin-right: 10rpx;">生产日期：</text>
									<text class="box-font-2" :class="i==isArray?'box-1-font-active':''" >{{item.data}}</text>
								</view>
							</view>
							<view class="">
								<view class="">
									<text class="box-font-1" :class="i==isArray?'box-1-font-active':''" >标准：</text>
									<text class="box-font-2" :class="i==isArray?'box-1-font-active':''" >{{item.standard}}</text>
								</view>
								<view class="">
									<text class="box-font-1" :class="i==isArray?'box-1-font-active':''" >项目名称：</text>
									<text class="box-font-2" :class="i==isArray?'box-1-font-active':''" >{{item.name}}</text>
								</view>
							</view>
							
						</view>
						
					</view>
				</view>
		 </view>
		 <view class="content" style="height: 98rpx;border-radius: 4rpx; border:2rpx solid #96A189;display: flex;align-items: center;">
		 	<input class="box-input" type="text" value=""  placeholder="可输入喷涂的信息"/>
		 </view>
		 <view class="" style="margin-bottom: 140rpx;">
		 	
		 	
		 </view>
		 <view class="" style="width: 750rpx;height: 2rpx;background-color: #A9A9A9;margin-bottom: 10rpx;"> </view>
			
		 <view class="o-bottom" style="margin-top: 10rpx;">
		 	<view class="" style="display: flex;justify-content: space-between;">
		 		<view class="" >
		 			<text class="t-font">当前预估价：</text>
		 			<text class="t-price">¥4089.34</text>
		 		</view>
		 		<view class="">
		 			<button type="default" @tap="toEnactFour()" style="background-color: #1B4098; color: #FFFFFF;width: 280rpx;height: 80rpx;">下一步</button>
		 		</view>
		 	</view>
		 	
		 	<view class="" style="position: relative;top: 48rpx; display: flex;justify-content: center;">
		 		<view class="" style="background-color: #000000;height: 10rpx;width: 268rpx;">
		 			
		 		</view>
		 	</view>
		 </view>
		 
		 <view @click="toIndex" class="o-2-box" style="background-color: #C4C7D4;width: 50rpx;height: 50rpx;border-radius: 50%;display: flex;justify-content: center;">
		 	<image style="width: 30rpx;height: 30rpx;position: relative;top:10rpx" src="../../static/index-1.png" mode=""></image>
		 </view>
		 
		 <view class="">
		 	<uni-popup ref="popup" type="center">
		 		<view class="" style="width: 750rpx;height: 400rpx; background-image: url(https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bg.png);">
		 			<view class="i-content" style="margin-top: 46rpx;margin-bottom: 16rpx;">
		 				<view class="i-font-1" style="">
		 					定金比例
		 				</view>
		 				
		 				<view class="i-font-2" style="margin-bottom: 32rpx;">
		 					根据您的需求设置您的定金比例
		 				</view>
		 				<view class="i-input" style="display: flex;">
		 					<view class="i-input-font" style="padding-top: 20rpx;" >
		 						<input class="" placeholder="请输入定金比例" type="text" :value="temp"  @input="onKeyInput" />
		 					</view>
		 					<view class="i-input-font-2" style="padding-top: 20rpx;">
		 						%
		 					</view>
		 				</view>
		 				
		 				<view class="" style="margin-top: 48rpx;">
		 					<button @tap="close()" style="height: 80rpx;width: 654rpx;background-color: #1B4098;" type="default">
		 						<text class="p-font-1">确定</text>
		 						</button>
		 				</view>
		 			</view>
		 		</view>
		 	</uni-popup>
		 	
		 </view>
		
	</view>
		
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
			},
		data() {
			return {
				value:20,
				title: 'picker',
				array: ['请选择收货选择城市','上海', '成都', '北京', '深圳'],
				index: 0,
				infoA:['','长兴县沙葛小学项目一期','长兴县沙葛小学项目二期'],
				InfoIndex:0,
				InfoIndexA:0,
				info: ['','浙江省太湖区长兴县沙葛小学','浙江省太湖区长兴县'],
				isActive1:1,
				isActive2:1,
				isActive3:true,
				isActive4:false,
				isActive5:false,
				temp:'',
				isArray:'',
				arrayList:[
					{
						sku:'2630x600x100mm',
						standard:'JGB-GB15762-B05',
						data:'140813 4 A',
						name:'珠海胜利河项目'	
					},
					{
						sku:'2630x600x100mm',
						standard:'JGB-GB15762-B05',
						data:'140813 4 A',
						name:'珠海胜利河项目'	
					},
					{
						sku:'2630x600x100mm',
						standard:'JGB-GB15762-B05',
						data:'140813 4 A',
						name:'珠海胜利河项目'	
					}
				]
				
			}
		},
		watch:{
			
		},
		methods: {
			toIndex:function(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			onKeyInput:function(e){
				this.temp = e.target.value;
				
			},
			open(){
			    this.$refs.popup.open()
			},
			close(){
				if(Number.parseInt(this.temp)<20){
					uni.showToast({
						icon:"none",
						title:"不能小于20%",
					})
				}else if(Number.parseInt(this.temp)>100){
					uni.showToast({
						icon:"none",
						title:"超出100%",
					})
				}
				else if(Number.parseInt(this.temp)%5!=0){
					uni.showToast({
						icon:"none",
						title:"输入为为5的倍数",
					})
				}
				else{
					this.value = Number.parseInt(this.temp)
					this.$refs.popup.close()
				}
				
			    
			},
			isActive:function(a){
				
				if(a=='isActive3'){
					this.isActive3 = !this.isActive3;
					this.isActive4 = false;
					this.isActive5 = false;
				}else if(a=='isActive4'){
					this.isActive3 = false;
					this.isActive4 = !this.isActive4;
					this.isActive5 = false;
				}else if(a=='isActive5'){
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = !this.isActive5;
				}
				
			},
			toBack:function(){
				console.log(1)
				uni.navigateBack({
					delta: 1 //返回上一级页面
				})
			},
			
			sliderChange(e) {
				this.value = e.detail.value;
				if(e.detail.value<20){
					this.value = 20
					uni.showToast({
						icon:"none",
						title:"定金比例必须大于等于20%",
						
					})
					

				}
			 },
			 bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.index = e.target.value
			},
			bindPickerChangeInfo:function(e){
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(e.target.value==0){
					this.info[0] = "请选择收货信息"
				}
				this.InfoIndex = e.target.value
			},
			bindPickerChangeInfoA:function(e){
				console.log('picker发送选择改变，携带值为', e.target.value)
				if(e.target.value==0){
					this.infoA[0] = "选择项目"
				}
				this.InfoIndexA = e.target.value
			},
			toEnactFour:function(){
				uni.navigateTo({
					url:'../panel-4/panel-4'
				})
			}
		}
	}
</script>
 
<style lang="less" scoped>
@import url("../enact-1/enact-1.less");
@import url("panel-3.less");
@import url("../../style.less");
</style>
